<template>
  <div class="app headB">
    <div class="cont1200">
      <ul>
        <li class="allCategories navlist" @mouseover="allBJ=true" @mouseout="allBJ=false">
          <a>
            <span class="el-icon-s-grid"></span>
            全部分类
          </a>
        </li>
        <!-- 导航数据 首页 电动车管。。。 -->
        <li class="navlist" v-for="item in navlist" :key="item.id">
          <router-link :class="item.name == $route.name ? 'actA' :''" :to="item.path">{{item.title}}</router-link>
        </li>
      </ul>
      <div class="f-r">
        <img src="https://res.tuhu.org/image/www/appIcon.gif" alt />
        <img src="https://res.tuhu.org/image/www/appIcon.gif" alt /> 
      </div>
      <div class="nav" @mouseover="allBJ=true" @mouseout="allBJ=false">
        <ul class="nav-ul-T" v-show="this.$route.path=='/' || allBJ">
          <li
            class="nav-li-t"
            v-for="item in navSide"
            :key="item.id"
            @mouseover="flg=item.id"
            @mouseleave="flg=0"
          >
            <span>
              <!-- <router-link :to="'/listgoods/'+item.id+'/0/0/'">{{item.name}}</router-link> -->
              <span>{{item.name}}</span>
            </span>
            <i :class="item.icoLeft" class="i-left el-icon-arrow-right"></i>

            <ul class="nav-ul-n" v-show="flg==item.id">
              <li v-for="item1 in item.list" :key="item1.id">
              <router-link :to="'/listgoods/0/'+item.id+'/0/'">{{item1.name}}:</router-link>
                <!-- <br> -->
                <router-link
                  v-for="item2 in item1.list"
                  :key="item2.id"
                  :to="'/listgoods/'+item.id+'/'+item1.id+'/'+item2.id"
                >{{item2.name}}</router-link>
                <!-- <a v-for="item2 in item1.list" :key="item2.id">{{item2.name}}</a> -->
              </li>
            </ul>

          </li>
        </ul>
      </div>

      <div class="nav-login" v-show="this.$route.path=='/'">
        <div class="top flex-c">
          <div class="avatar">
            <a href="https://www.qj361.com/user.html" title="查看个人资料">
              <el-avatar
                :size="80"
                src="https://qjsc.oss-cn-beijing.aliyuncs.com/images/system/config/default_image/default_user_portrait_0.jpg"
              ></el-avatar>
            </a>
          </div>

          <div class="nav-login-info">
            <span>Hi，欢迎来到骑境商城_买电动车/摩托车，就上骑境商城！</span>
            <a href="javascript:void(0)" class="nav-login-btn login-btn ajax-login">
              <el-button size="small">请登录</el-button>
            </a>
            <a
              href="https://www.qj361.com/shop/apply.html"
              target="_blank"
              class="nav-login-btn nav-apply"
            >
              <el-button size="small">我要开店</el-button>
            </a>
          </div>
        </div>
        <div class="bot">
          <div
            class="titibox"
            @mouseover="msgbox = true"
            :style="{'background-color':msgbox?'#ffffffe8':'#e7e7e7ee'}"
          >商城公告</div>
          <div
            class="titibox"
            @mouseover="msgbox = false"
            :style="{'background-color':!msgbox?'#ffffffe8':'#e7e7e7ee'}"
          >招商入驻</div>
          <div class="msgbox" v-show="msgbox">
            <ul class="xw">
              <li v-for="(i,index) in 6" :key="i">{{index+1}}. 商家安卓APP上线</li>
            </ul>
          </div>
          <div class="msgbox" v-show="!msgbox" style="text-align: center;">
            <img src="https://www.qj361.com/images/enter.jpg" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { isNull } from "util";
// import router from "../../router/index";
export default {
  data() {
    return {
      flg: "",
      allBJ: false,
      msgbox: true,
      msgF: true,
      navSide: []
    };
  },
  created() {
    // var vuexNavSide = this.$store.state.commonDATA.GetSideber;
    // console.log(vuexNavSide, this.ISnull(vuexNavSide));
    // if (!this.ISnull(vuexNavSide)) {
    //   this.$api.homeAPI.getSideNav().then(res => {
    //     var data = res.data.sidebar;
    //     this.$store.commit("GetSideberUpdata", data);
    //     this.navSide = data;
    //   });
    // } else {
    //   this.navSide = vuexNavSide;
    // }

    this.$api.homeAPI.getSideNav().then(res => {
      var data = res.data.list;
      this.$store.commit("GetSideberUpdata", data);
      this.navSide = data;
    });
  },
  computed: {
    navlist: function() {
      //导航栏数据
      var list = [];
      var routesData = this.$router.options.routes;
      for (var i in routesData) {
        if (routesData[i].type == "IndexNav") {
          list.push(routesData[i]);
        }
      }
      return list;
    }
    // navSide: function() {
    //   this.$api.homeAPI.getSideNav().then(res => {
    //     var data = res.data.sidebar;
    //     this.$store.commit("GetSideberUpdata", data);
    //     return data;
    //   });
    // }
  },
  methods: {
    mouseove() {},
    msgshow() {
      console.log("触发");
    }
  },
  components: {}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
$navHeight: 35px;
$allCategoriesW: 200px; //更多nav宽
.actA {
  background-color: $main-color12;
}
.app {
  background-color: $main-color;
  height: $navHeight;
  line-height: $navHeight;
  position: relative;
  z-index: 5;
  .navlist {
    a {
      color: white;
      font-weight: 600;
      display: block;
      height: $navHeight;
      width: 100px;
      text-align: center;
    }
    a:hover {
      background-color: $main-color12;
    }
  }

  ul {
    height: auto;
  }
  li {
    float: left;
    // padding-left: 5px;
    // padding-right: 5px;
  }
  .f-r img {
    height: $navHeight;
  }
  .allCategories {
    cursor: pointer;
    // background-color: $main-color12;
    width: $allCategoriesW;
    a {
      width: 100%;
    }
  }
  .cont1200 {
    position: relative;
  }
  .nav {
    $navLiHeight: 30px;
    $ictcolor: rgb(255, 255, 255);
    position: absolute;
    top: $navHeight;
    z-index: 3;
    width: $allCategoriesW;
    color: $ictcolor;
    .nav-ul-n {
      position: absolute;
      left: $allCategoriesW;
      top: 0px;
      width: 736px;
      background-color: $ictcolor;
      padding: 20px;
      padding-right: 0px;
      height: 404px;
      color: #000;
      li {
        width: 100%;
        line-height: 15px;
        color: rgb(105, 105, 105);
        margin-bottom: 5px;
        p {
          margin-bottom: 5px;
          cursor: pointer;
        }
        a {
          float: left;
          cursor: pointer;
          margin-right: 10px;
          margin-bottom: 5px;
          font-size: 14px;
        }
        a:hover {
          color: $main-color12;
          font-weight: 800;
        }
      }
      .nav-li-t:hover {
        color: $main-color12;
      }
    }

    .nav-ul-T {
      position: relative;
      font-size: 15px;
      background-color: rgba(59, 59, 59, 0.74);
      height: 443px;
    }
    .nav-li-t {
      width: 100%;
      height: $navLiHeight;
      line-height: $navLiHeight;
      span {
        cursor: pointer;

        display: block;
        width: 100%;
        text-align: center;
      }

      .i-left {
        position: relative;
        left: 150px;
        top: -30px;
      }
    }
    .nav-li-t:hover {
      background-color: $ictcolor;
      color: $main-color12;
    }
  }
  .nav-login {
    height: 443px;
    width: 244px;
    background-color: #ffffffad;
    position: absolute;
    top: 35px;
    right: 0px;
    .top {
      width: 100%;
      height: 40%;
      .avatar {
        padding-top: 9px;
      }
      .nav-login-info {
        font-size: 14px;
        text-align: center;
        width: 80%;
        span {
          display: block;
          color: #333;
          line-height: 25px;
          margin-bottom: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .bot {
      background-color: #ffffffe8;

      height: 60%;
      .titibox {
        float: left;
        width: 50%;
        text-align: center;
        cursor: pointer;
        background-color: #e7e7e7ee;
      }
      .titibox:hover {
        background-color: #eeeeee5c;
      }

      .msgbox {
        img {
          cursor: pointer;
          margin-top: 60px;
        }
        .xw {
          cursor: pointer;

          font-size: 12px;
          width: 100%;
          li {
            width: 100%;
            margin-left: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          color: #666;
        }
      }
    }
  }
}
</style>
